<template>
	<div>
		<b-skeleton-wrapper :loading="loading.list" v-if="!load_error.list">
			<template #loading>
				<div class="loading-layer">
					<b-card class="cart-item" border-variant="light" v-for="index in 4" :key="index">
						<div class="cart-item-selector">
							<b-skeleton height="1.25rem" width="1.25rem"/>
						</div>
						<div class="cart-item-images">
							<b-skeleton class="cart-item-images-shadow" type="text" />
						</div>
						<div class="cart-item-content">
							<b-skeleton height="2rem" width="97%" />
							<b-skeleton style="margin-top: 0.5rem;" height="1.25rem" width="75%" />
							<b-skeleton style="margin-top: 1rem;" height="1.5rem" width="25%" />
						</div>
					</b-card>
				</div>
			</template>
			
			<div class="page-status" v-if="!is_login">
				<div class="page-status-content" style="cursor: pointer;" @click="to_login">
					<img src="../../../public/images/default-status/no_auth.png" />
					<p>你还没有登录，点击这里登录</p>
				</div>
			</div>
			<div class="page-status" v-else-if="cart_empty">
				<div class="page-status-content" @click="to_shop">
					<img src="../../../public/images/default-status/cart_empty.png" />
					<p>购物车空空如也，先去看看商品吧</p>
				</div>
			</div>
			<div v-else>
				<div class="cart-item-container" style="padding: 0.625rem 0.625rem;">
					<b-card class="cart-item" border-variant="light" v-for="(item, i) in cart_data" :key="i">
						<div class="cart-item-selector">
							<b-form-checkbox class="cart-item-selector-checkbox" size="lg" v-model="item.checked" @change="checked_change($event)" />
						</div>
						<div class="cart-item-images">
							<img class="cart-item-images-shadow" :src="item.src + '!100'" />
						</div>
						<div class="cart-item-content">
							<p class="cart-item-goods-title">
								{{ item.name }}
							</p>
							<p class="cart-item-goods-spec">
								<span v-for="(spec, i) in item.spec" :key="spec.item.id">
									<span v-if="i == item.spec.length - 1">
										{{ spec.item.name }}
									</span>
									<span v-else>
										{{ spec.item.name }} /
									</span>
								</span>
							</p>
							<p class="cart-item-goods-price">
								<small>￥</small> {{ item.price }}
							</p>
							<p class="cart-item-goods-number">
								<b-form-spinbutton size="sm" v-model="item.number" @change="number_change(item.id, item.spec_token, $event)" />
							</p>
						</div>
					</b-card>
				</div>
				<div class="cart-foot-toolbar">
					<div class="cart-foot-toolbar-checkbox" @click.stop.prevent="checked_all">
						<b-form-checkbox v-model="all_selected" @click.stop.prevent="checked_all">
							<span style="user-select: none;">全选</span>
						</b-form-checkbox>
					</div>
					<div class="cart-foot-toolbar-delete">
						<p class="cart-foot-toolbar-inverse-btn" @click="cart_inverse">反选</p>
						<p class="cart-foot-toolbar-delete-btn" @click="cart_delete">删除</p>
					</div>
					<div class="cart-foot-toolbar-total">
						<p>合计：<span class="cart-foot-toolbar-total-money"><small>￥</small> {{ total }}</span></p>
					</div>
					<div class="cart-foot-toolbar-btn">
						<div class="cart-foot-toolbar-payment-btn" @click="settlement">结 算</div>
					</div>
				</div>
			</div>
		</b-skeleton-wrapper>
		<div class="page-status" v-else>
			<div class="page-status-content" style="cursor: pointer;" @click="reload_view">
				<img src="../../../public/images/default-status/load_error.png" />
				<p>加载失败了</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		comments: {
			
		},
		inject: [
			'to_login',
			'refresh_token',
			'reload_view'
		],
		data() {
			return {
				loading: {
					list: true
				},
				load_error: {
					list: false
				},
				cart_data: [],
				all_selected: false,
				total: (0).toFixed(2),
				is_login: true,
				cart_empty: false
			}
		},
		watch: {
			
		},
		created() {
			
		},
		mounted() {
			this.fetch_list()
		},
		methods: {
			fetch_list() {
				this.$axios.get('/cart/list').then(resp => {
					this.loading.list = false
					if(resp.ret == 0){
						if(resp.data.length == 0) this.cart_empty = true
						else {
							this.cart_data = resp.data
						}
						
						this.$router.find
					} else if(resp.ret == 1001){
						this.is_login = false
					} else this.load_error.list = true
				}).catch(resp => {
					this.load_error.list = true
				})
			},
			check_select_all(){
				let is_checked_all = true
				this.cart_data.forEach(item => {
					if(!item.checked) return is_checked_all = false
				})
				
				this.all_selected = is_checked_all
			},
			checked_change(event){
				if(!event && this.all_selected) this.all_selected = !this.all_selected
				else if(event && !this.all_selected) {
					let is_checked_all = true
					this.cart_data.forEach(item => {
						if(!item.checked) return is_checked_all = false
					})
					
					this.all_selected = is_checked_all
				}
				
				this.calc_total()
			},
			number_change(gid, spec_token, number) {
				let index = 0
				for(; index < this.cart_data.length; index++) {
					if(gid == this.cart_data[index].id && spec_token == this.cart_data[index].spec_token)
						break
				}
					
				this.$axios.post('/cart/update_number', {gid: gid, spec_token: spec_token, number: number}).then(resp => {
					if(resp.ret == -1){
						this.cart_data[index].number = resp.data.number
					}
					else if(resp.ret == 1001)
						this.reload_view()
					else
						this.calc_total()
				})
			},
			checked_all(){
				this.all_selected = !this.all_selected
				
				this.cart_data.forEach(item => {
					item.checked = this.all_selected
				})
				
				this.calc_total()
			},
			calc_total() {
				let money = 0
				this.cart_data.forEach(item => {
					if(item.checked){
						money += parseFloat(item.price * item.number)
					}
				})
				
				this.total = money.toFixed(2)
			},
			cart_inverse(){
				this.cart_data.forEach(item => {
					item.checked = !item.checked
				})
				
				this.check_select_all()
				this.calc_total()
			},
			cart_delete(){
				let delete_items = [];
				for(let i = 0; i < this.cart_data.length; i++){
					if(this.cart_data[i].checked){
						let obj = this.cart_data[i]
						delete_items.push({gid: obj.id, spec_token: obj.spec_token})
					}
				}
				if(delete_items <= 0)
					return false
				
				this.$axios.post('/cart/delete', delete_items).then(resp => {
					switch(resp.ret){
						case 0:
							for(let i = 0; i < delete_items.length; i++) {
								let index = 0;
								for(; index < this.cart_data.length; index++){
									if(delete_items[i].gid == this.cart_data[index].id && delete_items[i].spec_token == this.cart_data[index].spec_token) break
								}
								
								this.cart_data.splice(index, 1)
							}
							
							if(this.cart_data.length == 0) this.reload_view()
							else this.calc_total()
							break
						case 1001:
							this.reload_view()
							break
					}
				})
			},
			settlement() {
				let cart = [];
				this.cart_data.forEach(item => {
					if(item.checked) cart.push(item)
				})
				
				if(this.is_login && cart.length > 0)
					this.$router.push({name: 'cart-settlement', params: {cart: cart}})
			},
			to_shop() {
				this.$router.push('shop')
			}
		}
	}
</script>

<style>
	.page-status {
		position: relative;
		width: 100%;
		height: calc(100vh - 60px);
		text-align: center;
		display: flex;
		align-items: center;
		user-select: none;
	}
	.page-status-content {
		position: relative;
		width: 100%;
	}
	.page-status-content p {
		color: rgb(181, 191, 198);
	}
	.page-status-content img {
		position: relative;
	}
	
	.loading-layer {
		width: 100%;
		padding: 0.625rem 0.625rem;
	}
	.loading-shadow {
		width: 100%;
		height: 7.5rem;
		margin-bottom: 0.625rem;
		border-radius: 0.3125rem;
	}
	
	.cart-item-container {
		position: relative;
		height: calc(100vh - 60px - 5.0625rem);
		overflow-y: auto;
	}
	.cart-item {
		display: flex;
		margin-bottom: 0.9375rem;
	}
	.cart-item-selector {
		float: left;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 6.25rem;
	}
	.cart-item-selector-checkbox {
		margin: 0 auto;
	}
	.cart-item-images {
		float: left;
		display: inline-block;
		width: 6.25rem;
		height: 6.25rem;
	}
	.cart-item-images-shadow {
		width: 6.25rem;
		height: 6.25rem;
	}
	.cart-item-content {
		float: right;
		display: inline-block;
		height: 6.25rem;
		width: calc(100% - 9.25rem);
	}
	.cart-item-content p {
		margin-bottom: 0;
	}
	.cart-item-goods-title {
		top: 1.25rem;
		font-size: 1.125rem;
	}
	.cart-item-goods-spec {
		margin-top: 0.3125rem;
		font-size: 0.8125rem;
		color: #666;
	}
	.cart-item-goods-price {
		position: absolute;
		bottom: 1.25rem;
		font-size: 1.125rem;
		color: rgb(255, 78, 47);
	}
	.cart-item-goods-number {
		position: absolute;
		bottom: 1.25rem;
		right: 1.25rem;
		font-size: 1.125rem;
	}
	
	.cart-foot-toolbar {
		display: flex;
		flex-direction: row;
		height: 5rem;
		background-color: #fff;
		border-top: 0.0625rem solid #eee;
	}
	.cart-foot-toolbar-checkbox {
		height: 5rem;
		width: 5rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.cart-foot-toolbar-delete {
		height: 5rem;
		width: 2.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.cart-foot-toolbar-delete p {
		text-align: center;
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		margin-bottom: 0;
		user-select: none;
		cursor: pointer;
	}
	.cart-foot-toolbar-inverse-btn {
		color: #666
	}
	.cart-foot-toolbar-delete-btn {
		color: red;
	}
	.cart-foot-toolbar-total {
		width: calc(100% - 14rem);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: right;
		height: 5rem;
	}
	.cart-foot-toolbar-total p {
		margin: 0;
		color: #666
	}
	.cart-foot-toolbar-total-money {
		color: #FF7F50;
		font-size: 1.25rem;
	}
	.cart-foot-toolbar-btn {
		width: 6.5rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 5rem;
	}
	.cart-foot-toolbar-payment-btn {
		height: 2.5rem;
		width: 5rem;
		line-height: 2.5rem;
		text-align: center;
		border-radius: 2.5rem;
		background-color: #FF7F50;
		border-color: #FF7F50;
		color: #fff;
		user-select: none;
		cursor: pointer;
	}
</style>
